<template>
    <div>
         <div class="logo">
             <img src="../../assets/img/login/log.png" alt="">
         </div>
         <div class="cont">
             <div class="login" style="margin-top: 0.8rem;">
                <div class="phoneCont">
                    <img src="../../assets/img/login/user.png" alt="">
                    <input type="text" placeholder="请输入账号" v-model="loginName" name="">
                    <img class="delUser" @click="delUser" src="../../assets/img/login/del.png" alt="">
                </div>
                <div class="phoneCont">
                    <img src="../../assets/img/login/passWo.png" alt="">
                    <input type="passWord" placeholder="输入密码" v-model="password" name="" >
                </div>
            </div>
            <div class="denglu" @click="enter">登录</div>
            <div class="schedule" @click="progress">我的申请进度</div>
         </div>
         
    </div>
</template>
<script>
import cookie from '../../util/cookie'
export default {
    data() {
        return {
            loginName: '',
            password: ''
        }
    },
    mounted() {
        
    },
    methods: {
        delUser(){
            this.loginName = ''
        },
        progress(){
            this.$router.push('verification')
        },
        enter(){
            if(!this.check()){
                return
            }
            let Base64 = require('js-base64').Base64
            var prams = {
                loginName:this.loginName,
                password:Base64.encode(this.password)
            }
            this.$store.dispatch('login/UserLogin',prams).then((res) => {
                if (res.status == 200) {
                    cookie.set('token',res.data.token)
                    this.$store.commit('login/setUserInfo', res.data)
                    if(res.data.needRestPassword){
                        this.$router.push('userPass')
                        return
                    }
                    this.$router.push('todayData')
                } else {
                   this.$toast(res.msg)
                }
                
            })
        },
        check(){
           if(!this.loginName){
               this.$toast('请输入账号')
               return false
           }
           if(!this.password){
               this.$toast('请输入密码')
               return false
           }
           return true
        }
    },
}
</script>
<style scoped>
.logo{
    height: 4.3rem;
    width: 100%;
}
.logo img{
    height: 100%;
    width: 100%;
}
.cont{
    width: 6.68rem;
    height: 5.56rem;
    background: #FFFFFF;
    border-radius: 0.25rem;
    margin: 0 auto;
    margin-top: 0.24rem;  
    box-shadow: 0rem 0.03rem 0.08rem 0rem rgba(0, 0, 0, 0.08);    
    overflow: hidden;
}
.phoneCont{
    width: 5.6rem;
    height: 0.84rem;
    border-bottom: 1px solid #EEEEEE;
    margin: 0 auto;
    margin-top: 0.36rem;
}
.phoneCont img{
    width: 0.28rem;
    height: 0.32rem;
    float: left;
    margin: 0.22rem 0.27rem;
    vertical-align: middle;
}
.phoneCont input{
    float: left;
    margin: 0.15rem 0;
    height: 0.5rem;
    width: 3.8rem;
    border: none;
    font-size: 0.3rem;
    padding-left: 0.1rem;
    line-height: 0.5rem;
    vertical-align: middle;
}
.denglu{
    width: 5rem;
    height: 0.84rem;
    line-height: 0.84rem;
    background: linear-gradient(-90deg,#4955F1,#4A8BF6);
    border-radius: 0.42rem;
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.32rem;
    margin-top: 0.5rem;
}
.schedule{
    color: #4B7BF9;
    font-size: 0.28rem;
    text-align: center;
    margin-top: 0.5rem;
}
.delUser{
   width: 0.26rem;height:0.24rem;margin-top:0.26rem
}
</style>